VIIRS Fire Points
Access and Open the CartoCSS documentation HERE. An advanced CartoCSS document is located HERE.
Unzip the inclass data, then upload the
fires-sa-viirs.geojson data to your own Carto account. This
data was accessed January 25, 2021 from NASA
EarthData.
Make a map with the fire data and style the points with no aggregation (under Style > Aggregation, Points should be selected).
Default Style prior to CartoCSS styling
#layer properties as follows:
CartoCSS applied to #layer for VIIRS
Fire Points
Next, utilizing the previous styled CartoCSS instance, now turn to enacting Zoom Conditions for the layer
First, we will keep the current styling as default, but add in one Zoom Level Condition as follows:
[zoom >= 10] {
marker-width: 40;
}
When the zoom level is 12 or more,
make the markers 15 pixels wide.
[zoom >= 12] {
marker-fill: green;
}
Zoom Condition #2 Applied
Note: CartoCSS is ‘order dependent’ meaning the order of the conditions is respected, i.e. what comes first is enacted first, what comes second, is enacted second, and so forth.
Following the Zoom Conditions above, next we’ll turn to
attribute-based conditions. The column bright_ti4
represents the following, with values in the dataset ranging 208 - 367
:
VIIRS I-4 channel brightness temperature of the fire pixel measured in Kelvin.
For those points whose brightness is greater than 350, we will
change those to red with a default color of
black. We will also make the default marker-width
5 and the condition marker-width enlarged at
10:
[bright_ti4 >= 350]{
marker-width: 10;
marker-fill: red;
marker-fill-opacity: 1.0;
}
Attribute-based Conditions Applied
Using the carto-colors
documentation, we will apply a custom color scheme to the
bright_ti4 variable of the Fire Points dataset.
First, we will clear out the previous CartoCSS, and then switch to a classification ramp for the Fire Points fill colorization:
Use jenks method
Apply to the the bright_ti4 column
Choose the green-to-blue colorbrewer ramp:
marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);
To accent the color ramp, the following complete #layer
CartoCSS can be used:
#layer {
marker-width: 10;
marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);
marker-fill-opacity: 0.9;
marker-allow-overlap: true;
marker-line-width: .5;
marker-line-color: black;
marker-line-opacity: 1;
}
Color Ramp Applied